<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 工具栏容器 -->
<div id="toolbar-container"></div>
 
<!-- 编辑器容器 -->
<div id="editor">
    <p>This is the initial editor content.</p>
</div>

  </div>
</template>

<script>
import CKEditor from '../../static/ckeditor'
import '../../static/scp/scp.css'
import '../../static/layer-v3.1.1/layer/theme/default/layer.css'
import {ScreenCapture,CaptureManager} from '../../static/scp/scp'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'ScreenCapture for ckeditor5',      
      editor:null,//编辑器实例
    }
  },
  mounted() {
     ScreenCapture.getInstance({
       PostUrl:"http://localhost:92/upload.aspx",
     }).loadAuto();
     this.initCKEditor();
  },   
  methods: {
      initCKEditor() {
        CKEditor.create(document.querySelector('#editor')).then(editor => {
          const toolbarContainer = document.querySelector('#toolbar-container');
          toolbarContainer.appendChild(editor.ui.view.toolbar.element);
          this.editor = editor //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
          ScreenCapture.getInstance().data.editor = editor;
        }).catch(error => {
          console.error(error);
        });
     }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
